import { FC } from "react";
import { BaseButtonProps, ButtonType, ButtonDefaultProps, ButtonProps } from "./interface";
import classNames from "classnames";

const Button: FC<ButtonProps> = (props) => {

    const {
        btnType,
        size,
        disabled,
        className,
        children,
        href, 
        ...restProps // 解构其他原生属性
    } = { ...ButtonDefaultProps, ...props };

    // 构建className
    const classes = classNames('btn', className, {
        [`btn-${btnType}`]: btnType,
        [`btn-${size}`]: size,
        'is-disabled': (btnType === 'link') && disabled, // 由于a标签没有disabled属性，因此这里使用is-disabled类名表示对链接按钮的禁用设置
    })

    // 返回链接按钮（单独处理）
    if (btnType === 'link' && href) {
        return (
            <a
                href={href}
                className={classes}
                {...restProps}
            >
                {children}
            </a>
        )
    }

    return (
        <button
            className={classes}
            disabled={disabled}
            {...restProps}
        >
            {children}
        </button>
    )
}

export default Button;